<template>
  <el-dialog
    v-model="dialogVisible"
    title="视频预览"
    width="80%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div class="video-container">
      <video ref="videoPlayer" controls :src="videoUrl" width="100%" height="auto">
        您的浏览器不支持视频播放
      </video>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

// Props
const props = defineProps({
  dialogPreviewVideo: {
    type: Boolean,
    default: false
  },
  videoUrl: {
    type: String,
    default: ''
  },
  fileFormat: {
    type: String,
    default: ''
  },
  playList: {
    type: Array,
    default: () => []
  },
  fid: {
    type: String,
    default: ''
  }
})

// Emits
const emit = defineEmits(['close', 'flashClick', 'handleOpen', 'curentVideo'])

// 响应式数据
const dialogVisible = ref(false)
const videoPlayer = ref(null)

// 监听props变化
watch(() => props.dialogPreviewVideo, (newVal) => {
  dialogVisible.value = newVal
})

// Methods
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}

const flashClick = () => {
  emit('flashClick')
}

const curentVideo = () => {
  emit('curentVideo')
}

// Lifecycle
onMounted(() => {
  // 初始化视频播放器
})

onUnmounted(() => {
  // 清理资源
  if (videoPlayer.value) {
    videoPlayer.value.pause()
    videoPlayer.value.src = ''
  }
})
</script>

<style scoped>
.video-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

video {
  max-height: 60vh;
  border-radius: 4px;
}
</style>